<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    span{
      display: inline-block;
      font-size: 40px;
      color: red;
    }
  </style>
</head>
<body>
  <canvas id="canvas"></canvas>

</body>
</html>
<script>
  /** @type {HTMLCanvasElement} */
  var canvas=document.querySelector("#canvas")
  var ctx=canvas.getContext("2d")
  canvas.width=window.innerWidth
  canvas.height=window.innerHeight
  //创建画布2
  var textcanvas=document.createElement("canvas")
  var textctx=textcanvas.getContext("2d")
  var pics=[]
  function Ball(x,y,color){
    this.x=x
    this.y=y
    this.color=color
    this.draw=function(){
      ctx.beginPath()
      ctx.save()
      ctx.fillStyle=this.color
      ctx.arc(this.x,this.y,1,0,Math.PI*2)
      ctx.fill()
      ctx.restore()
      ctx.closePath()
    }
  }
  // var str=function(){
    var span=document.createElement("span")
    span.textContent="你好呀"
    document.querySelector("body").appendChild(span)
    // var w=span.
    var w=span.clientWidth
    var h=span.clientHeight
    document.body.removeChild(span)
    textcanvas.width=w
    textcanvas.height=h
    textctx.font="40px Arial"
    textctx.fillStyle="red"
    textctx.fillRect(0,0, textcanvas.width, textcanvas.height)
    textctx.fillText("你好呀",0,40)
    var text=textctx.getImageData(0,0,textcanvas.width,textcanvas.height)
    console.log(text);
  // }
  function hua(){
  ctx.beginPath()
  ctx.save()
  var color=ctx.createLinearGradient(0,0,200,200)
  color.addColorStop(1,"red")
  color.addColorStop(.5,"yellow")
  color.addColorStop(0,"skyblue")
  ctx.fillStyle=color
  ctx.font = "48px serif";
  ctx.font="100px serif"
  ctx.textBaseline = "hanging";
  var span=document.
  ctx.fillText("hello",20,20)
  ctx.closePath()
  ctx.restore()
  }
</script>